<template>
 <!-- 立库历史记录 -->
  <div class="fillcontain">
    <div class="searchArea">
      <el-form size="mini" :inline="true">
        <el-form-item label="日期：">
          <el-date-picker
            v-model="create"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            size="mini" 
            icon="el-icon-search"
            @click="getHistoryData()"
            >查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
   <!-- 订单表格 -->
   <div class="table_container">
    <el-table
      size="mini"
      border
      v-loading="loading"
      element-loading-text = "数据正在加载中..."
      element-loading-spinner = "el-icon-loading"
      :data="storeList"
      style="width: 90%"
      align="center">
      <el-table-column
        prop="shelves_id"
        label="卡槽"
        align="center">
      </el-table-column>
      <el-table-column
        prop="barcodes"
        label="产品码"
        align="center">
      </el-table-column>
      <!-- <el-table-column
        prop="time_on"
        label="入库时间"
        align="center">
      </el-table-column> -->
      <el-table-column 
        prop="time_off" 
        label="出库时间" 
        align="center">
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <pagination
      :paginations="paginations"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    ></pagination>
   </div>
  </div>
</template>
<script>
import {shelvesList} from '@/api/store.js'
import Pagination from "@/components/pagination";
export default {
 components:{
    Pagination,
 },
  data () {
    return {
       loading:false,
       storeList:[],
       create:'',
       paginations: {
        index: 1, // 当前位于哪页
        size: 8, // 1页显示多少条
        pageSizes: [5, 8, 10, 15], //每页显示多少条
        pageTotal: 0, //总记录条数
      }
    }
  },
 methods:{
   async getHistoryData(){
      if(!this.create){
        return 
      }
      this.loading=true
      let params={
        create:this.create,
        size:this.paginations.size,
        index:this.paginations.index
      }
     const res= await shelvesList(params)   
     this.storeList=res.data
     this.paginations.pageTotal=res.count
     this.loading = false;
    },
      //上下分页
    handleCurrentChange(newPage) {
       this.paginations.index=newPage
       this.getHistoryData()
    },
    //每页显示多少条
    handleSizeChange(newCount) {
      this.paginations.size=newCount
      this.getHistoryData()
    }
 }
}
</script>
<style lang='scss' scoped>
</style>